<template>
  <jke-modal
    :visible.sync="jkeForm.visible"
    :width="1200"
    :title="jkeForm.title"
    :fullscreen.sync="jkeForm.fullscreen"
    :switchFullscreen="jkeForm.switchFullscreen"
  >
    <!--  -->
    <crumbs @goBack="goBack" :superiorMenu="['设备管理', '设备保养', '保养方案']" currentMenu="方案详情"> </crumbs>
    <div style="height: calc(100vh - 112px); overflow-y: auto; overflow-x: hidden">
      <div class="uni-card">
        <div class="bd-line"></div>
        <div class="item-wrap">
          <div class="detail-item">
            <p class="subtitle">方案编号</p>
            <p class="secondary-text">{{ detailInfo.programCode || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">方案名称</p>
            <p class="secondary-text">{{ detailInfo.programName || '-' }}</p>
          </div>
          <div class="detail-item">
            <p class="subtitle">状态</p>
            <p class="secondary-text" :style="{ color: detailInfo.programStatusText == '启用' ? '#00b042' : '#ff4d4f' }">{{ detailInfo.programStatusText || '-' }}</p>
          </div>
        </div>
      </div>
      <div class="cards-box">
        <a-card title="设备信息" :bordered="false" style="margin-top: 12px">
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">设备类别</p>
              <p class="secondary-text">{{ detailInfo.deviceCategoryText || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">保养设备</p>
              <p class="secondary-text">{{ detailInfo.deviceText || '-' }}</p>
            </div>
            <div class="detail-item" />
          </div>
        </a-card>
        <a-card title="时间方案" :bordered="false" style="margin-top: 12px">
          <div class="item-wrap">
            <div class="detail-item">
              <p class="subtitle">方案开始日期</p>
              <p class="secondary-text">{{ detailInfo.startDate || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">方案结束日期</p>
              <p class="secondary-text">{{ detailInfo.endDate || '-' }}</p>
            </div>
            <div class="detail-item" />
          </div>
          <div class="item-wrap" style="margin-top: 40px">
            <div class="detail-item">
              <p class="subtitle">周期数</p>
              <p class="secondary-text">{{ detailInfo.periodNum || '-' }}</p>
            </div>
            <div class="detail-item">
              <p class="subtitle">周期单位</p>
              <p class="secondary-text">{{ detailInfo.periodUnitText || '-' }}</p>
            </div>
            <div class="detail-item" />
          </div>
        </a-card>
        <a-card title="保养项目" :bordered="false" style="margin-top: 12px">
          <a-table :columns="columns" :data-source="tableData" :pagination="false">
            <span slot="projectCode"></span>
            <span slot="projectCode" :title="text" slot-scope="text, record">
              {{ `${text}-${record.projectName}` }}
            </span>
          </a-table>
        </a-card>
        <a-card title="其他信息" :bordered="false" style="margin-top: 12px">
          <div class="item-wrap">
            <div class="detail-item" style="width: 100%">
              <p class="subtitle">备注</p>
              <p class="secondary-text">{{ detailInfo.remark || '-' }}</p>
            </div>
          </div>
          <div class="item-wrap" style="margin-top: 40px">
            <div style="width: 100%">
              <p class="subtitle">附件</p>
              <file-detail :ids="detailInfo.attachment"></file-detail>
            </div>
          </div>
        </a-card>
      </div>
    </div>
  </jke-modal>
</template>
<script>
import crumbs from '@/components/crumbs.vue'
import FileDetail from '@/components/fileActions/FileDetail'
import { API } from '@/api/requestFzs'
export default {
  data() {
    return {
      jkeForm: {
        title: '方案详情',
        visible: false,
        fullscreen: true,
        switchFullscreen: true,
      },
      detailInfo: {},
      columns: [
        {
          title: '序号',
          customRender: (text, record, index) => `${index + 1}`,
        },
        {
          title: '保养项',
          dataIndex: 'projectCode',
          key: 'projectCode',
          scopedSlots: { customRender: 'projectCode' },
        },
        {
          title: '保养标准',
          dataIndex: 'maintainStandard',
          key: 'maintainStandard',
        },
      ],
      tableData: [],
    }
  },
  components: {
    crumbs,
    FileDetail,
  },
  methods: {
    /* 面包屑返回 */
    goBack() {
      this.jkeForm.visible = false
    },
    initDetail(id) {
      this.jkeForm.visible = true
      API.messDeviceMaintainProgramQueryById({ id }).then((res) => {
        if (res.code == 200) {
          let arr = []
          this.detailInfo = res.result
          this.tableData = this.detailInfo.itemList
          this.detailInfo.deviceList.forEach((item) => {
            arr.push(`${item.deviceCode}-${item.deviceName}`)
          })
          this.detailInfo.deviceText = arr.join(',')
        }
      })
    },
  },
}
</script>
<style scoped lang="less">
@import '~@/assets/less/public.less';
.item-wrap {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item-wrap:nth-of-type(n + 3) {
  margin-top: 40px;
}
.detail-item {
  width: 30%;
}
.uni-card {
  padding: 24px 40px;
  margin: -12px -12px 0;
  background: #fff;
}
.bd-line {
  height: 1px;
  background: @greyBorder;
  margin: -12px -40px 24px -40px;
}
.cards-box {
  height: calc(100vh - 205px);
  overflow-y: scroll;
}
</style>
